<template>
  <div class="pa30">
    <!-- <div v-if="listData.type === 'STUDENT'">学生身份-{{ listData.type }}</div>
    <div v-else>老师身份-{{ listData.type }}</div>-->
    <el-row :gutter="20">
      <el-col :span="3">
        <div class="grid-content">
          <div class="demo-type">
            <div>
              <el-avatar
                v-if="listData && listData.avatarUrl"
                :size="100"
                :src="listData.avatarUrl"
              />
              <el-avatar
                v-else-if="listData && listData.sex === 'MALE'"
                :size="100"
                :src="avatar.avatar_man"
              />
              <el-avatar
                v-else-if="listData && listData.sex === 'FEMALE'"
                :size="100"
                :src="avatar.avatar_girl"
              />
              <el-avatar v-else style="font-size: 56px;" icon="el-icon-user-solid" />

              <!-- <el-avatar
                :size="100"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />-->
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div v-if="listData.teacher && listData.teacher.isFamous" class="isFamous-box marginT10">
          <img :src="require('@/assets/images/isFamous.png')" style="height: 22px;" />
          <span class="marginL10">认证名师</span>
        </div>
        <div class="grid-content pt30 marginT10">
          <el-form ref="ruleForm" :model="listData" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="昵称">
                    <el-input v-model="listData.name" class="input-width" @input="callBack" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="手机号码">
                    <el-input v-model="listData.mobileNumber" class="input-width" />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="邮箱">
                    <el-input v-model="listData.email" class="input-width" />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-form-item v-if="listData.authenticated" label="身份" prop="idcard">
              <el-col v-if="listData.type === 'STUDENT'" :span="8">
                <span class="tag">师范生</span>
                <div class="line-height30">
                  <label>
                    <span style="color:#409eff;">&nbsp;&nbsp;已认证&nbsp;&nbsp;</span>
                    {{ listData.authTime }}
                  </label>
                </div>
              </el-col>
              <el-col v-else :span="8">
                <span class="tag" disabled>老 师</span>
                <div class="line-height30">
                  <label>
                    <span style="color:#409eff;">&nbsp;&nbsp;已认证&nbsp;&nbsp;</span>
                    {{ listData.authTime }}
                  </label>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item v-else label="身份" prop="idcard">
              <el-col v-if="listData.type === 'STUDENT'" :span="8">
                <span class="tag">师范生</span>
                <div class="line-height30 marginL10" @click="getIdentityAuth">
                  <el-tag style="cursor: pointer;" effect="dark">认证</el-tag>
                </div>
              </el-col>
              <el-col v-else :span="8">
                <span class="tag" disabled>老 师</span>
                <div class="line-height30 marginL10" @click="getIdentityAuth">
                  <el-tag style="cursor: pointer;" effect="dark">认证</el-tag>
                </div>
              </el-col>
            </el-form-item>

            <!-- 老师身份 - start -->
            <el-row v-if="listData.type === 'TEACHER'" :gutter="20">
              <el-col :span="24">
                <div class="grid-content">
                  <el-form-item label="省市区">
                    <Area :list="regionList" @CallBack="getAreaCallBack" />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="listData.type === 'TEACHER'" :gutter="20">
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="学校">
                    <el-input v-model="listData.org.school" class="input-width" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="办学性质">
                    <el-select v-model="listData.org.schoolType" placeholder="请选择办学性质">
                      <el-option
                        v-for="item in optionsSchoolType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="listData.type === 'TEACHER'" :gutter="20">
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="学段">
                    <el-select
                      v-model="listData.teacher.phase"
                      placeholder="请选择学段"
                      :disabled="options.stage && options.stage.length > 0 ? false : true"
                    >
                      <el-option
                        v-for="item in options.stage"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="科目">
                    <el-select
                      v-model="listData.teacher.subjects"
                      placeholder="请选择科目"
                      :disabled="options.subject && options.subject.length > 0 ? false : true"
                    >
                      <el-option
                        v-for="item in options.subject"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-form-item v-if="listData.type === 'TEACHER'" label="教学擅长">
              <el-select
                v-model="listData.teacher.goodAtLabelCodes"
                multiple
                style="width: 100%;"
                placeholder="请选择教学擅长"
                :disabled="options.columnTags && options.columnTags.length > 0 ? false : true"
              >
                <el-option
                  v-for="item in options.columnTags"
                  :key="item.tagsId"
                  :label="item.tagsName"
                  :value="item.tagsId"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="listData.type === 'TEACHER'" label="其他擅长">
              <el-select
                v-model="listData.teacher.focusLabelCodes"
                style="width: 100%;"
                multiple
                placeholder="请选择其他擅长"
                :disabled="options.otherTags && options.otherTags.length > 0 ? false : true"
              >
                <el-option
                  v-for="item in options.otherTags"
                  :key="item.tagsId"
                  :label="item.tagsName"
                  :value="item.tagsId"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="listData.type === 'TEACHER'" label="培训擅长">
              <el-select
                v-model="listData.teacher.trainSpecialityCodes"
                multiple
                style="width: 100%;"
                placeholder="请选择培训擅长"
                :disabled="options.columnTags && options.columnTags.length > 0 ? false : true"
              >
                <el-option
                  v-for="item in options.columnTags"
                  :key="item.tagsId"
                  :label="item.tagsName"
                  :value="item.tagsId"
                />
              </el-select>
            </el-form-item>
            <!-- 老师身份 - end -->

            <!-- 学生身份 - start -->
            <el-row v-if="listData.type === 'STUDENT'" :gutter="20">
              <el-col :span="24">
                <div class="grid-content">
                  <el-form-item label="专业">
                    <el-cascader
                      v-model="listData.normalStudent.majors"
                      style="width: 100%;"
                      :disabled="options.majorTree && options.majorTree.length > 0 ? false : true"
                      :options="options.majorTree"
                      :props="{
                        value:'id',
                        label:'name',
                        children:'children'
                      }"
                      placeholder="请选择专业"
                      @change="majorTreeChange"
                    />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="listData.type === 'STUDENT'" :gutter="20">
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="目标学段">
                    <el-select
                      v-model="listData.normalStudent.phaseCodes"
                      multiple
                      placeholder="请选择目标学段"
                      :disabled="options.stage && options.stage.length > 0 ? false : true"
                    >
                      <el-option
                        v-for="item in options.stage"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="科目">
                    <el-select
                      v-model="listData.normalStudent.subjectCodes"
                      multiple
                      placeholder="请选择科目"
                      :disabled="options.subject && options.subject.length > 0 ? false : true"
                    >
                      <el-option
                        v-for="item in options.subject"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-form-item v-if="listData.type === 'STUDENT'" label="教学擅长">
              <el-select
                v-model="listData.normalStudent.goodAtLabelCodes"
                multiple
                style="width: 100%;"
                placeholder="请选择教学擅长"
                :disabled="options.columnTags && options.columnTags.length > 0 ? false : true"
              >
                <el-option
                  v-for="item in options.columnTags"
                  :key="item.tagsId"
                  :label="item.tagsName"
                  :value="item.tagsId"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="listData.type === 'STUDENT'" label="其他擅长">
              <el-select
                v-model="listData.normalStudent.focusLabelCodes"
                multiple
                style="width: 100%;"
                placeholder="请选择其他擅长"
                :disabled="options.otherTags && options.otherTags.length > 0 ? false : true"
              >
                <el-option
                  v-for="item in options.otherTags"
                  :key="item.tagsId"
                  :label="item.tagsName"
                  :value="item.tagsId"
                />
              </el-select>
            </el-form-item>

            <el-form-item v-if="listData.type === 'TEACHER'" label="职业照">
              <el-col :span="24">
                <el-col :span="12">
                  <el-upload
                    class="avatar-uploader"
                    :action="action"
                    :header="uploadHeader"
                    :data="uploadForm"
                    :show-file-list="false"
                    :on-success=" (res, file) => {return uploadSuccess(res, file, 'zyzUrl')}"
                    :before-upload="beforeUpload"
                  >
                    <div
                      class="uploader-text-box"
                      style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;"
                    >
                      <img
                        v-if="listData.zyzUrl"
                        :src="listData.zyzUrl"
                        class="avatar"
                        style="width: 100%; height: 100%;"
                      />
                      <div v-else>
                        <i class="el-icon-plus avatar-uploader-icon uploader-icon" />
                        <div class="el-upload__text upload__text" style="font-size:16px;">职业照</div>
                      </div>
                    </div>
                  </el-upload>
                </el-col>
                <el-col v-if="listData.authApplies && listData.authApplies.length > 0" :span="12">
                  <div
                    v-for="(authItem, authInx ) in listData.authApplies"
                    :key="authInx"
                    class="authApplies-box"
                  >
                    <div v-if="authItem.applyType === 'ZYZ'">
                      <ul>
                        <li v-for="(flowItem, flowInx) in authItem.flowList" :key="flowInx">
                          <div
                            class="time text-s-o"
                            :title="flowItem.createTime"
                          >{{ flowItem.createTime }}</div>
                          <div
                            class="status text-s-o"
                            :title="flowItem.remark"
                          >{{ flowItem.remark }}</div>
                          <div
                            class="openDetails text-s-o"
                            :title="'查看详情'"
                            @click="openDetails(flowItem)"
                          >查看详情</div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-col>
              </el-col>
            </el-form-item>

            <el-form-item label="身份证">
              <el-col :span="24">
                <el-col :span="12">
                  <div style="display: flex;">
                    <div class="avatar-uploader">
                      <!-- <el-upload
                      class="avatar-uploader"
                      :action="action"
                      :header="uploadHeader"
                      :data="uploadForm"
                      :show-file-list="false"
                      :on-success=" (res, file) => {return uploadSuccess(res, file, 'idcardFrontUrl')}"
                      :before-upload="beforeUpload"
                      >-->
                      <div
                        class="uploader-text-box"
                        style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;"
                      >
                        <img
                          v-if="listData.idcardFrontUrl"
                          :src="listData.idcardFrontUrl"
                          class="avatar"
                          style="width: 100%; height: 100%;"
                        />
                        <div v-else>
                          <div class="el-upload__text upload__text" style="font-size:16px;">正面</div>
                        </div>
                      </div>
                      <!-- </el-upload> -->
                    </div>
                    <div class="avatar-uploader marginL20">
                      <!-- <el-upload
                      class="avatar-uploader marginL20"
                      :action="action"
                      :header="uploadHeader"
                      :data="uploadForm"
                      :show-file-list="false"
                      :on-success=" (res, file) => {return uploadSuccess(res, file, 'idcardBackUrl')}"
                      :before-upload="beforeUpload"
                      >-->
                      <div
                        class="uploader-text-box"
                        style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;"
                      >
                        <img
                          v-if="listData.idcardBackUrl"
                          :src="listData.idcardBackUrl"
                          class="avatar"
                          style="width: 100%; height: 100%;"
                        />
                        <div v-else>
                          <div class="el-upload__text upload__text" style="font-size:16px;">反面</div>
                        </div>
                      </div>
                      <!-- </el-upload> -->
                    </div>
                  </div>
                  <el-col class="marginT10" :span="22" style="display: flex; ">
                    <div style="width: 90px; text-align: right; padding-right:10px;">身份证号</div>
                    <el-input v-model="listData.idcardNumber" disabled class="input-width" />
                  </el-col>
                </el-col>
                <el-col v-if="listData.authApplies && listData.authApplies.length > 0" :span="12">
                  <div
                    v-for="(authItem, authInx ) in listData.authApplies"
                    :key="authInx"
                    class="authApplies-box"
                  >
                    <div v-if="authItem.applyType === 'IDCARD'">
                      <ul>
                        <li v-for="(flowItem, flowInx) in authItem.flowList" :key="flowInx">
                          <div
                            class="time text-s-o"
                            :title="flowItem.createTime"
                          >{{ flowItem.createTime }}</div>
                          <div
                            class="status text-s-o"
                            :title="flowItem.remark"
                          >{{ flowItem.remark }}</div>
                          <div
                            class="openDetails text-s-o"
                            :title="'查看详情'"
                            @click="openDetails(flowItem)"
                          >查看详情</div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-col>
              </el-col>
            </el-form-item>

            <el-form-item v-if="listData.type === 'TEACHER'" label="教师资料">
              <el-col :span="24">
                <el-col :span="12">
                  <el-upload
                    class="avatar-uploader"
                    :action="action"
                    :header="uploadHeader"
                    :data="uploadForm"
                    :show-file-list="false"
                    :on-success=" (res, file) => {return uploadSuccess(res, file, 'teacherCertUrl')}"
                    :before-upload="beforeUpload"
                  >
                    <div
                      class="uploader-text-box"
                      style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;"
                    >
                      <img
                        v-if="listData.teacher.teacherCertUrl"
                        :src="listData.teacher.teacherCertUrl"
                        class="avatar"
                        style="width: 100%; height: 100%;"
                      />
                      <div v-else>
                        <i class="el-icon-plus avatar-uploader-icon uploader-icon" />
                        <div class="el-upload__text upload__text" style="font-size:16px;">教师资格证</div>
                      </div>
                    </div>
                  </el-upload>

                  <el-col class="marginT10" :span="22" style="display: flex; ">
                    <div style="width: 90px; text-align: right; padding-right:10px;">编号</div>
                    <el-input v-model="listData.teacher.teacherCertCode" class="input-width" />
                  </el-col>
                  <el-col class="marginT10" :span="22" style="display: flex; ">
                    <div style="width: 90px; text-align: right; padding-right:10px;">任教学段</div>
                    <el-select
                      v-model="listData.teacher.teacherCertType"
                      style="width: 100%;"
                      placeholder="请选择任教学段"
                      :disabled="options.stage && options.stage.length > 0 ? false : true"
                    >
                      <el-option
                        v-for="item in options.stage"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-col>
                </el-col>
                <el-col v-if="listData.authApplies && listData.authApplies.length > 0" :span="12">
                  <div
                    v-for="(authItem, authInx ) in listData.authApplies"
                    :key="authInx"
                    class="authApplies-box"
                  >
                    <div v-if="authItem.applyType === 'TEACHER_CERT'">
                      <ul>
                        <li v-for="(flowItem, flowInx) in authItem.flowList" :key="flowInx">
                          <div
                            class="time text-s-o"
                            :title="flowItem.createTime"
                          >{{ flowItem.createTime }}</div>
                          <div
                            class="status text-s-o"
                            :title="flowItem.remark"
                          >{{ flowItem.remark }}</div>
                          <div
                            class="openDetails text-s-o"
                            :title="'查看详情'"
                            @click="openDetails(flowItem)"
                          >查看详情</div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-col>
              </el-col>
            </el-form-item>

            <el-form-item v-if="listData.type === 'TEACHER'" label="职称">
              <el-col :span="24">
                <el-col :span="12">
                  <el-upload
                    class="avatar-uploader"
                    :action="action"
                    :header="uploadHeader"
                    :data="uploadForm"
                    :show-file-list="false"
                    :on-success=" (res, file) => {return uploadSuccess(res, file, 'titleCertUrl')}"
                    :before-upload="beforeUpload"
                  >
                    <div
                      class="uploader-text-box"
                      style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;"
                    >
                      <img
                        v-if="listData.teacher.titleCertUrl"
                        :src="listData.teacher.titleCertUrl"
                        class="avatar"
                        style="width: 100%; height: 100%;"
                      />
                      <div v-else>
                        <i class="el-icon-plus avatar-uploader-icon uploader-icon" />
                        <div class="el-upload__text upload__text" style="font-size:16px;">教师职称证</div>
                      </div>
                    </div>
                  </el-upload>

                  <el-col class="marginT10" :span="22" style="display: flex; ">
                    <div style="width: 90px; text-align: right; padding-right:10px;">编号</div>
                    <el-input v-model="listData.teacher.titleCertCode" class="input-width" />
                  </el-col>
                  <el-col class="marginT10" :span="22" style="display: flex; ">
                    <div style="width: 90px; text-align: right; padding-right:10px;">级别</div>
                    <el-select
                      v-model="listData.teacher.teacherTitle"
                      style="width: 100%;"
                      placeholder="请选择级别"
                      :disabled="optionsuserTitle && optionsuserTitle.length > 0 ? false : true"
                    >
                      <el-option
                        v-for="item in optionsuserTitle"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                </el-col>
                <el-col v-if="listData.authApplies && listData.authApplies.length > 0" :span="12">
                  <div
                    v-for="(authItem, authInx ) in listData.authApplies"
                    :key="authInx"
                    class="authApplies-box"
                  >
                    <div v-if="authItem.applyType === 'TITLE_CERT'">
                      <ul>
                        <li v-for="(flowItem, flowInx) in authItem.flowList" :key="flowInx">
                          <div
                            class="time text-s-o"
                            :title="flowItem.createTime"
                          >{{ flowItem.createTime }}</div>
                          <div
                            class="status text-s-o"
                            :title="flowItem.remark"
                          >{{ flowItem.remark }}</div>
                          <div
                            class="openDetails text-s-o"
                            :title="'查看详情'"
                            @click="openDetails(flowItem)"
                          >查看详情</div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-col>
              </el-col>
            </el-form-item>

            <el-form-item label="学生证">
              <el-col :span="24">
                <el-col :span="12">
                  <el-upload
                    class="avatar-uploader"
                    :action="action"
                    :header="uploadHeader"
                    :data="uploadForm"
                    :show-file-list="false"
                    :on-success=" (res, file) => {return uploadSuccess(res, file, 'studentCertUrl')}"
                    :before-upload="beforeUpload"
                  >
                    <div
                      class="uploader-text-box"
                      style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;"
                    >
                      <img
                        v-if="listData.normalStudent.studentCertUrl"
                        :src="listData.normalStudent.studentCertUrl"
                        class="avatar"
                        style="width: 100%; height: 100%;"
                      />
                      <div v-else>
                        <i class="el-icon-plus avatar-uploader-icon uploader-icon" />
                        <div class="el-upload__text upload__text" style="font-size:16px;">学生证</div>
                      </div>
                    </div>
                  </el-upload>

                  <el-col class="marginT10" :span="22" style="display: flex; ">
                    <div style="width: 90px; text-align: right; padding-right:10px;">有效期</div>
                    <el-date-picker
                      v-model="listData.normalStudent.studentCertValid"
                      type="datetime"
                      placeholder="选择日期时间"
                    />
                    <!-- <el-date-picker
                      v-model="value1"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />-->
                  </el-col>
                </el-col>
                <el-col v-if="listData.authApplies && listData.authApplies.length > 0" :span="12">
                  <div
                    v-for="(authItem, authInx ) in listData.authApplies"
                    :key="authInx"
                    class="authApplies-box"
                  >
                    <div v-if="authItem.applyType === 'STUDENT_CERT'">
                      <ul v-if="authItem.flowList && authItem.flowList.length > 0">
                        <li v-for="(flowItem, flowInx) in authItem.flowList" :key="flowInx">
                          <div
                            class="time text-s-o"
                            :title="flowItem.createTime"
                          >{{ flowItem.createTime }}</div>
                          <div
                            class="status text-s-o"
                            :title="flowItem.remark"
                          >{{ flowItem.remark }}</div>
                          <div
                            class="openDetails text-s-o"
                            :title="'查看详情'"
                            @click="openDetails(flowItem)"
                          >查看详情</div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-col>
              </el-col>
            </el-form-item>

            <!-- 学生身份 - end -->
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!-- 照片模块 start -->

    <el-dialog :visible.sync="dialogVisible" width="30%">
      <span>{{ dialog.remark }}</span>
      <div v-if="dialog.picUrls && dialog.picUrls.length > 0">
        <el-image
          v-for="(item, index) in dialog.picUrls"
          :key="index"
          style="width: 300px;"
          :src="item"
          fit="contain"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  optionsGoodsContent,
  optionsAttention,
  optionsTraining
} from './mock.js';

import { schoolType, userTitleList } from './data.js';
import { preUpload } from '@/api/uploads';
import { getUserInfo, findColumnTags, identityAuth } from '@/api/users';
import { listByKind, getMajorTree } from '@/api/basic';
import Area from '@/components/Area';
export default {
  name: 'Userinfo',
  components: { Area },
  props: ['list'],
  data () {
    return {
      dialog: {
        picUrls: [],
        remark: null
      },
      dialogVisible: false,
      // 默认头像
      avatar: {
        avatar_man: require('@/assets/images/avatar_man.png'),
        avatar_girl: require('@/assets/images/avatar_girl.png')
      },
      otherTags: [],
      columnTags: [],
      options: {
        majorTree: null, // 专业树
        stage: null, // 学段
        subject: null, // 学科
        columnTags: null, // 分类标签
        otherTags: null // 其他擅长
      },
      uploadStatus: false, // 是否可点击上传按钮
      optionsSchoolType: schoolType,
      optionsuserTitle: userTitleList,
      optionsCitySelect: [], // 存放默认值
      optionsCity: {}, // 存放城市数据
      listData: this.list,
      optionsGoodsContent: optionsGoodsContent,
      optionsAttention: optionsAttention,
      optionsTraining: optionsTraining,

      action: 'https://yes910-pub.obs.cn-south-1.myhuaweicloud.com',
      uploadHeader: {
        'Content-Type': 'multipart/form-data'
      },
      uploadForm: {},
      fileUrl: '',
      // 省市区
      regionList: {
        province: '',
        city: '',
        area: ''
      }

    };
  },
  watch: {
    list: {
      deep: true,
      handler (data) {
        // console.log('data:', data);
        this.listData = data;
      }
    }
  },
  created () {
    console.log('listData:', this.listData);
    if (this.listData.type === 'TEACHER') {
      this.regionList = {
        province: this.listData.org.area.provinceCode || '',
        city: this.listData.org.area.cityCode || '',
        area: this.listData.org.area.districtCode || ''
      };
    }
    this.init();
  },
  methods: {
    async init () {
      await this.getMajorTreeList();
      await this.getListByKind('stage');
      await this.getListByKind('subject');
      await this.getColumnTags({
        growthClassify: null,
        stageList: [],
        subjectList: []
      });
      await this.getOtherTags();
    },

    openDetails (item) {
      console.log('item:', item);
      this.dialogVisible = true;
      this.dialog = item;
    },
    // 认证身份
    getIdentityAuth () {
      identityAuth({
        type: this.listData.type,
        userId: this.listData.userId
      }).then(res => {
        // this.init();
        this.listData.authenticated = true;
        this.$message({
          message: '认证成功',
          type: 'success'
        });
      });
    },
    // 获取专业
    getMajorTreeList () {
      getMajorTree().then(res => {
        var newArr = [];
        const toArr = arr => {
          arr.map(item => {
            item.children && item.children instanceof Array && item.children.length > 0 ? toArr(item.children) : delete item.children;
          });
        };
        toArr(res.data);

        var ret = [];
        const assign = arr => {
          arr.map(item => {
            item.children && item.children instanceof Array && item.children.length > 0 ? assign(item.children) : ret.push(item);
          });
        };
        assign(res.data);
        console.log('ret:', ret);
        console.log('专业树:', res.data);
        this.options.majorTree = res.data;
      });
    },
    majorTreeChange (value) {
      console.log(value);
    },
    // 查询分类标签
    getColumnTags (params) {
      findColumnTags(params).then(res => {
        console.log('教学擅长:', res.data);
        this.options.columnTags = res.data;
      });
    },
    // 查询全部分类标签
    getOtherTags () {
      findColumnTags({
        growthClassify: null,
        stageList: [],
        subjectList: []
      }).then(res => {
        console.log('其他擅长:', res.data);
        this.options.otherTags = res.data;
      });
    },
    // 查字典
    getListByKind (name) {
      var obj = {};
      obj['dictKind'] = name;
      listByKind(obj).then(res => {
        this.options[name] = res.data;
      });
    },

    // 获取省市区
    getAreaCallBack (obj) {
      this.$set(this.listData.org.area, 'provinceCode', obj.province);
      this.$set(this.listData.org.area, 'cityCode', obj.city);
      this.$set(this.listData.org.area, 'districtCode', obj.area);
    },
    callBack () {
      console.log('listData:', this.listData);
      console.log('otherTags:', this.otherTags);
      this.$emit('callBack', this.listData);
    },
    uploadSuccess (res, file, type) {
      switch (type) {
        case 'zyzUrl':// 职业照
          this.$set(this.listData, 'zyzUrl', this.files);
          break;
        // case 'idcardFrontUrl': // 身份证正面
        //   this.$set(this.listData, 'idcardFrontUrl', this.files);
        //   break;
        // case 'idcardBackUrl': // 身份证反面
        //   this.$set(this.listData, 'idcardBackUrl', this.files);
        //   break;
        case 'teacherCertUrl':// 教师资格证
          this.$set(this.listData.teacher, 'teacherCertUrl', this.files);
          break;
        case 'titleCertUrl': // 职称
          this.$set(this.listData.teacher, 'titleCertUrl', this.files);
          break;
        case 'studentCertUrl': // 学生证
          this.$set(this.listData.normalStudent, 'studentCertUrl', this.files);
          break;
      }
      console.log(' this.listData:', this.listData);
      this.callBack();
      // this.$emit('callBack', this.listData);
    },
    beforeUpload (file) {
      // const imgStr = /\.(jpg|jpeg|png|JPG|PNG|JPEG)$/
      // if (!imgStr.test(file.name)) {
      //   this.$message.error('上传格式不对，请重新上传!')
      //   return false
      // }
      this.uploadStatus = true;
      let continueUpload = false;
      return new Promise((resolve, reject) => {
        preUpload({
          biz: 'OPEN',
          name: file.name,
          size: file.size
        })
          .then(res => {
            this.uploadStatus = false;
            this.action = res.data.action;
            this.uploadForm = res.data.parameters;
            continueUpload = true;
            this.files = res.data.uri;
            resolve(continueUpload);
          })
          .catch(err => {
            reject(continueUpload);
          });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.input-width {
  width: 100%;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.avatar-uploader {
  width: 140px;
  height: 140px;
  background: #f7f4f4;
  border-radius: 4px;
  border: 1px solid #d7d6d6;
}
.isFamous-box {
  display: flex;
  align-items: center;
  margin-left: 80px;
}
.form-list {
  height: 170px;
  padding: 20px;
  border: 1px solid black;
  overflow: auto;
  line-height: 30px;
}
.upload-img-overflow {
  height: 200px;
  overflow: hidden;
}
.tag {
  border: 1px solid black;
  border-radius: 20px;
  padding: 2px 10px;
  display: inline-block;
  width: 80px;
  line-height: 24px;
  text-align: center;
  &_status {
    background: rgb(79, 192, 141);
    color: white;
    height: 20px;
    padding: 0 10px;
  }
  &_lineheight {
    line-height: 20px;
  }
}
.select-width {
  width: 750px;
}

.authApplies-box {
  ul {
    height: 138px;
    overflow: hidden;
    overflow-y: auto;
    li {
      display: flex;
      align-items: center;
      > div {
        flex: 2;
      }

      .openDetails {
        cursor: pointer;
        color: #1e87f0;
        flex: 1;
      }
    }
  }
}
</style>
